<template>
  <div class="excel">
    <!-- 表格 -->
    <el-button @click="resetDateFilter">清除日期过滤器</el-button>
    <el-button @click="clearFilter">清除所有过滤器</el-button>
    <el-button @click="exportTemplate">导出模板</el-button>
    <!-- 文件上传 -->
    <el-upload
      style="line-height: 0px"
      class="upload-demo"
      action="http://localhost:8888/excel/getExcelImport"
      :limit="1"
      :on-exceed="handleExceed"
      :before-upload="beforeAvatarUpload"
      :show-file-list="false"
    >
      <el-button size="small" type="primary">一键导入</el-button>
    </el-upload>
    <el-table ref="filterTable" :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        sortable
        width="180"
      ></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        width="180"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span size="medium">{{ scope.row.address }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="tag"
        label="标签"
        width="100"
        :filters="[
          { text: '家', value: '家' },
          { text: '公司', value: '公司' },
        ]"
        :filter-method="filterTag"
        filter-placement="bottom-end"
      >
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.tag === '家' ? 'primary' : 'success'"
            disable-transitions
            >{{ scope.row.tag }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {getExcelExport} from '@/api/excel'
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          tag: "家",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          tag: "公司",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          tag: "家",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          tag: "公司",
        },
      ],
    };
  },
  methods: {
    // 文件超出限制个数时的钩子
    handleExceed(files) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length} 个文件`
      );
    },
    // 上传文件前的钩子，参数：上传的文件，主要用于上传前校验
    beforeAvatarUpload(file) {
      const isXlS =
        file.type ===
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
        file.type === "application/vnd.ms-excel";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isXlS) {
        this.$message.error("上传文件只能是 excle 格式!");
        return;
      }
      if (!isLt2M) {
        this.$message.error("上传文件大小不能超过 2MB!");
        return;
      }
      this.$message({
              showClose: true,
              message: "上传中，请稍后！",
              type: "info",
            });
      return isXlS && isLt2M;
    },
    // 表格方法
    // 清空日期筛选器
    resetDateFilter() {
      this.$refs.filterTable.clearFilter("date");
    },
    // 清空所有筛选器
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    // 筛选标签
    filterTag(value, row) {
      return row.tag === value;
    },
    // 导出模板
    exportTemplate() {
      // getExcelExport();
      location.href = this.$global.apiUrl+'/excel/getExcelExport'
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.excel {
  line-height: 0px;
}
.upload-demo{
  width:80px;
  /* line-height: 80px; */
}
</style>
<style>
/* 表格多行省略号top显示 */
.el-tooltip__popper, .el-tooltip__popper.is-dark {
    line-height: 14px;
    max-width: 25rem;
    color: #fff !important;
}

</style>
